<!DOCTYPE html>
<html>
<head>
    <title>Messages</title>
    <style>
        .messages {
            height: auto; 
            overflow-y: auto;
            padding: 10px;
            margin: 10px;
        }

        .message {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            height: auto;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="messages">
        {% for message in messages %}
        <div class="message">
            <p><strong>Time: </strong>{{ message['time'] }}</p>
            <p><strong>Sender: </strong>{{ message['sender'] }}</p>
            <p><strong>Receiver: </strong>{{ message[receiver] }}</p>
            <p><strong>Content: </strong>{{ message['content'].replace('\n', '<br>') | safe }}</p>
        </div>
        {% endfor %}
    </div>
</body>
</html>